<template>
    <div class="safety-container page-container">
        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧监控区 -->
            <div class="monitor-section">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📹</span>
                        实时监控
                    </div>
                    <div class="monitor-grid">
                        <div class="monitor-item" v-for="(item, index) in monitorData" :key="index">
                            <div class="monitor-title">{{ item.title }}</div>
                            <div class="monitor-value">{{ item.value }}</div>
                            <div class="monitor-trend" :class="item.trend">
                                {{ item.change }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🚨</span>
                        安全预警
                    </div>
                    <div class="alert-list">
                        <div class="alert-item" v-for="(alert, index) in alertData" :key="index" :class="alert.level">
                            <div class="alert-time">{{ alert.time }}</div>
                            <div class="alert-content">
                                <div class="alert-title">{{ alert.title }}</div>
                                <div class="alert-desc">{{ alert.description }}</div>
                            </div>
                            <div class="alert-status">{{ alert.status }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间地图区 -->
            <div class="map-section">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📊</span>
                        城市安全态势
                    </div>
                    <div class="safety-trend-chart" ref="safetyTrendChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🎯</span>
                        安全事件分布
                    </div>
                    <div class="safety-distribution-chart" ref="safetyDistributionChart"></div>
                </div>
            </div>

            <!-- 右侧数据区 -->
            <div class="data-section">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">📊</span>
                        安全指数
                    </div>
                    <div class="safety-index-chart" ref="safetyIndexChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏥</span>
                        应急资源
                    </div>
                    <div class="resource-list">
                        <div class="resource-item" v-for="(resource, index) in resourceData" :key="index">
                            <div class="resource-info">
                                <div class="resource-name">{{ resource.name }}</div>
                                <div class="resource-value">{{ resource.value }}</div>
                            </div>
                            <div class="resource-progress">
                                <div class="progress-bar">
                                    <div class="progress" :style="{ width: resource.progress + '%' }"></div>
                                </div>
                                <div class="progress-value">{{ resource.progress }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 顶部数据
const scoreData = ref([
    { value: '95.8', label: '城市安全指数', trend: 'up', change: '2.3%', isHighlight: true },
    { value: '98.5%', label: '应急响应率', trend: 'up', change: '1.5%', isHighlight: false },
    { value: '99.2%', label: '监控覆盖率', trend: 'up', change: '0.8%', isHighlight: false }
])

// 监控数据
const monitorData = ref([
    { title: '交通监控', value: '2,356', change: '+12%', trend: 'up' },
    { title: '安防监控', value: '5,892', change: '+8%', trend: 'up' },
    { title: '环境监测', value: '1,234', change: '+5%', trend: 'up' },
    { title: '消防监控', value: '3,567', change: '+15%', trend: 'up' }
])

// 预警数据
const alertData = ref([
    {
        time: '10:30',
        title: '越秀区交通拥堵预警',
        description: '中山路路段车流量较大，建议绕行',
        level: 'warning',
        status: '处理中'
    },
    {
        time: '10:15',
        title: '天河区空气质量预警',
        description: 'PM2.5指数偏高，请注意防护',
        level: 'info',
        status: '已处理'
    },
    {
        time: '09:45',
        title: '海珠区消防隐患预警',
        description: '某小区消防通道堵塞，需及时处理',
        level: 'danger',
        status: '待处理'
    }
])

// 地图统计数据
const mapStats = ref([
    { value: '256', label: '监控点位' },
    { value: '128', label: '应急站点' },
    { value: '64', label: '救援队伍' },
    { value: '32', label: '医疗点' }
])

// 紧急联系人
const emergencyContacts = ref([
    { icon: '🚑', name: '医疗急救', number: '120' },
    { icon: '🚒', name: '消防报警', number: '119' },
    { icon: '👮', name: '治安报警', number: '110' },
    { icon: '🚓', name: '交通事故', number: '122' }
])

// 资源数据
const resourceData = ref([
    { name: '医疗救援队', value: '256支', progress: 85 },
    { name: '消防车辆', value: '128辆', progress: 92 },
    { name: '应急物资', value: '1000吨', progress: 78 },
    { name: '避难场所', value: '64个', progress: 88 }
])

// 图表实例
const safetyIndexChart = ref<HTMLElement | null>(null)
const safetyTrendChart = ref<HTMLElement | null>(null)
const safetyDistributionChart = ref<HTMLElement | null>(null)

const safetyIndexChartInstance = ref<echarts.ECharts | null>(null)
const safetyTrendChartInstance = ref<echarts.ECharts | null>(null)
const safetyDistributionChartInstance = ref<echarts.ECharts | null>(null)

const resizeChart = () => {
    window.addEventListener('resize', () => {
        safetyIndexChartInstance.value?.resize();
        safetyTrendChartInstance.value?.resize();
        safetyDistributionChartInstance.value?.resize();
    })
}

// 初始化图表
onMounted(() => {
    resizeChart();
    
    // 延迟初始化图表，确保容器完全渲染
    nextTick(() => {
        setTimeout(() => {
            initCharts();
        }, 100);
    });
})

const initCharts = () => {
    if (safetyIndexChart.value) {
        const chart = echarts.init(safetyIndexChart.value)
        safetyIndexChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['安全指数', '应急响应', '监控覆盖'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLabel: { color: '#fff' }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { color: '#fff' }
                }
            ],
            series: [
                {
                    name: '安全指数',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00a1ff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 161, 255, 0.3)' },
                            { offset: 1, color: 'rgba(0, 161, 255, 0.1)' }
                        ])
                    },
                    data: [85, 87, 89, 91, 93, 95]
                },
                {
                    name: '应急响应',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00ff88'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 255, 136, 0.3)' },
                            { offset: 1, color: 'rgba(0, 255, 136, 0.1)' }
                        ])
                    },
                    data: [90, 92, 94, 95, 96, 98]
                },
                {
                    name: '监控覆盖',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#ff6b6b'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                        ])
                    },
                    data: [88, 90, 92, 94, 96, 99]
                }
            ]
        })
        
        // 强制重绘
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    if (safetyTrendChart.value) {
        const chart = echarts.init(safetyTrendChart.value)
        safetyTrendChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['安全指数', '应急响应', '监控覆盖'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLabel: { color: '#fff' }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { color: '#fff' }
                }
            ],
            series: [
                {
                    name: '安全指数',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00a1ff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 161, 255, 0.3)' },
                            { offset: 1, color: 'rgba(0, 161, 255, 0.1)' }
                        ])
                    },
                    data: [85, 87, 89, 91, 93, 95]
                },
                {
                    name: '应急响应',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#00ff88'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(0, 255, 136, 0.3)' },
                            { offset: 1, color: 'rgba(0, 255, 136, 0.1)' }
                        ])
                    },
                    data: [90, 92, 94, 95, 96, 98]
                },
                {
                    name: '监控覆盖',
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#ff6b6b'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                            { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                        ])
                    },
                    data: [88, 90, 92, 94, 96, 99]
                }
            ]
        })
        
        // 强制重绘
        setTimeout(() => {
            chart.resize();
        }, 50);
    }

    if (safetyDistributionChart.value) {
        const chart = echarts.init(safetyDistributionChart.value)
        safetyDistributionChartInstance.value = chart;
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '安全事件分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 35, name: '交通事故', itemStyle: { color: '#00a1ff' } },
                        { value: 25, name: '火灾事故', itemStyle: { color: '#ff6b6b' } },
                        { value: 20, name: '自然灾害', itemStyle: { color: '#ffd700' } },
                        { value: 15, name: '公共卫生', itemStyle: { color: '#00ff88' } },
                        { value: 5, name: '其他事件', itemStyle: { color: '#9370db' } }
                    ]
                }
            ]
        })
        
        // 强制重绘
        setTimeout(() => {
            chart.resize();
        }, 50);
    }
}
</script>

<style scoped lang="scss">
.safety-container {
    width: 100%;
    background: linear-gradient(180deg, #001529 0%, #003366 100%);
    color: #fff;
    display: flex;


    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .monitor-section, .data-section {
            width: 30%;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                flex: 1;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 15px;
                backdrop-filter: blur(10px);

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 15px;
                    color: #00a1ff;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .icon {
                        font-size: 24px;
                    }
                }
            }
        }

        .monitor-section {
            .monitor-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;

                .monitor-item {
                    background: rgba(255, 255, 255, 0.05);
                    padding: 15px;
                    border-radius: 8px;
                    transition: all 0.3s ease;

                    &:hover {
                        background: rgba(255, 255, 255, 0.1);
                    }

                    .monitor-title {
                        font-size: 14px;
                        color: #a0a0a0;
                        margin-bottom: 5px;
                    }

                    .monitor-value {
                        font-size: 24px;
                        font-weight: bold;
                        color: #fff;
                        margin-bottom: 5px;
                    }

                    .monitor-trend {
                        font-size: 12px;
                        padding: 2px 6px;
                        border-radius: 4px;
                        display: inline-block;

                        &.up {
                            color: #00ff88;
                            background: rgba(0, 255, 136, 0.1);
                        }

                        &.down {
                            color: #ff6b6b;
                            background: rgba(255, 107, 107, 0.1);
                        }
                    }
                }
            }

            .alert-list {
                .alert-item {
                    padding: 12px;
                    border-radius: 8px;
                    margin-bottom: 10px;
                    background: rgba(255, 255, 255, 0.05);
                    transition: all 0.3s ease;

                    &:hover {
                        background: rgba(255, 255, 255, 0.1);
                    }

                    &.warning {
                        border-left: 4px solid #ffd700;
                    }

                    &.danger {
                        border-left: 4px solid #ff6b6b;
                    }

                    &.info {
                        border-left: 4px solid #00a1ff;
                    }

                    .alert-time {
                        font-size: 12px;
                        color: #a0a0a0;
                        margin-bottom: 5px;
                    }

                    .alert-content {
                        .alert-title {
                            font-size: 16px;
                            font-weight: bold;
                            margin-bottom: 5px;
                        }

                        .alert-desc {
                            font-size: 14px;
                            color: #a0a0a0;
                        }
                    }

                    .alert-status {
                        font-size: 12px;
                        padding: 2px 8px;
                        border-radius: 4px;
                        background: rgba(255, 255, 255, 0.1);
                        margin-top: 5px;
                        display: inline-block;
                    }
                }
            }
        }

        .map-section {
            flex:1;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
               
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 15px;
                backdrop-filter: blur(10px);
                flex: 1;

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 15px;
                    color: #00a1ff;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .icon {
                        font-size: 24px;
                    }
                }

                .safety-trend-chart,
                .safety-distribution-chart {
                    height: calc(100% - 50px);
                }
            }
        }

        .data-section {
            .safety-index-chart {
                height: 300px;
            }

            .resource-list {
                .resource-item {
                    margin-bottom: 15px;

                    .resource-info {
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 8px;

                        .resource-name {
                            color: #a0a0a0;
                        }

                        .resource-value {
                            color: #00a1ff;
                            font-weight: bold;
                        }
                    }

                    .resource-progress {
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        .progress-bar {
                            flex: 1;
                            height: 4px;
                            background: rgba(255, 255, 255, 0.1);
                            border-radius: 2px;
                            overflow: hidden;

                            .progress {
                                height: 100%;
                                background: linear-gradient(90deg, #00a1ff, #00ff88);
                                border-radius: 2px;
                                transition: width 1s ease;
                            }
                        }

                        .progress-value {
                            font-size: 12px;
                            color: #a0a0a0;
                            min-width: 40px;
                        }
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
</style>